<template>
  <div class="login">
    <div class="login-container">
      <div class="header">
        <img src="~assets/image/monkey.png" />
      </div>
      <loginPanel></loginPanel>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import loginPanel from './cpns/login-panel.vue'

export default defineComponent({
  components: {
    loginPanel
  }
})
</script>

<style scoped lang="less">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to right, #fbc2eb, #a6c1ee);
  .login-container {
    width: 420px;
    height: 500px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0 30px;
      font-size: 38px;
      font-weight: 700;
      img {
        width: 130px;
        height: 130px;
      }
    }
  }
}
</style>
